<template>
    <div id="funmine">
        <div class="funmine-header">
            <div>
                <input type="text" class="funmine-input" v-model="localtionText" @keyup='autoSearch(localtionText)' id='emc-addr'>
                <img :src="deleteSrc" @click="localtionText =''"/>
            </div>
            <img class="funmine-img" :src="searchSrc" @click="search(localtionText)" />
        </div>
        <div id="container"></div>
        <div class="funmine-body-list">
            <div class="funmine-text funmine-top">以下均为当前位置的周边建筑,便于呼救时提供方位。如需更精确位置,请放大地图</div>
            <div v-for="(item, index) in placeSearchList" :key="index" @click="placeSearchListss(item)">
                <span>{{item.name}}</span>
                <span class="funmine-text">{{item.address}}</span>
            </div>
        </div>
        <div class="funmine-footer">
            <div>
                <!-- <span>所在地120电话</span>
                <span>0510-120</span> -->
                <span>您的当前位置:</span>
                <span>{{currentAddress}}</span>
            </div>
            <img :src="callSrc"  @click="submit">
        </div>
    </div>
</template>
<script>
const deleteUrl = require('../../../assets/img/delete.png')
const searchUrl = require('../../../assets/img/search.png')
const callUrl = require('../../../assets/img/call.png')
import { Toast } from 'mint-ui'
export default {
    data () {
        return {
            deleteSrc: deleteUrl,
            searchSrc: searchUrl,
            callSrc: callUrl,
            localtionText: '',
            formattedAddress: '',
            citycode: '',
            placeSearchList: [],
            currentAddress: '',
            currentPositionsss: '',
            type: ''
        }
    },
    mounted () {
        document.getElementById("funmine").style.height = window.innerHeight + 'px'
        let query = this.$route.query
        this.type = query.type
        console.log(query)
        this.getAmap()
    },
    methods: {
        getAmap () { 
            let _this = this         
            let map = new AMap.Map('container',{
                resizeEnable: true,
                scrollWheel: false,
                zoom: 5
            })
            map.plugin('AMap.Geolocation', function () {
                let geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                    convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                    showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                    panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                    zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                window.AMap.event.addListener(geolocation, 'complete', function(result) {
                    // alert(JSON.stringify(result))
                    let positionsss = [result.position.lng, result.position.lat]
                    _this.currentAddress = result.formattedAddress
                    _this.currentPositionsss = positionsss.toString()
                    _this.citycode = result.addressComponent.citycode
                    AMap.service(["AMap.PlaceSearch"], function() {
                        let placeSearch = new AMap.PlaceSearch({ //构造地点查询类
                            pageSize: 10,
                            pageIndex: 1,
                            city: _this.citycode //城市
                        });
                        //关键字查询
                        placeSearch.searchNearBy('', positionsss, 500, (status, result) => {
                            if (result.info == "OK") {
                                _this.placeSearchList = result.poiList.pois
                            }
                        });
                    });
                })
            });
            AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
                let positionPicker = new PositionPicker({
                    mode:'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
                    map: map//依赖地图对象
                });
                positionPicker.on('success', (positionResult) => {
                    console.log(positionResult)
                    _this.currentAddress = positionResult.address
                    _this.placeSearchList = positionResult.regeocode.pois
                })

                positionPicker.on('fail', (positionResult) => {
                    console.log('选址失败')
                })

                positionPicker.start()
                map.panBy(0, 1)
                map.addControl(new AMap.ToolBar({
                    liteStyle: true
                }))
            })
        },
        placeSearchListss (item) {
            console.log(item)
            let _this = this
            let positionsss = [item.location.lng, item.location.lat]
            if (item.formattedAddress) {    
                _this.currentAddress = item.formattedAddress
            }else {
                _this.currentAddress = item.address
            }
            _this.currentPositionsss = positionsss.toString()
            AMap.service(["AMap.PlaceSearch"], function() {
                let placeSearch = new AMap.PlaceSearch({ //构造地点查询类
                    pageSize: 20,
                    pageIndex: 1,
                    city: '' //城市
                });
                //关键字查询
                placeSearch.searchNearBy('', positionsss, 500, (status, result) => {
                    if (result.info == "OK") {
                        _this.placeSearchList = result.poiList.pois
                    }
                });
            });
        },
        search (address) {
            let _this = this
            AMap.service('AMap.Geocoder',function(){
                let geocoder = new AMap.Geocoder({
                    city: address
                })
                geocoder.getLocation(_this.localtionText, function(status, result) {
                    if (status === 'complete' && result.info === 'OK') {
                        let item = result.geocodes[0]
                        console.log(item)
                        _this.placeSearchListss(item)
                    }
                })
            })
        },
        autoSearch (key) {
            let _this = this
            AMap.plugin(['AMap.Autocomplete'],function(){
                let autoOptions = {
                    city: _this.citycode, //城市，默认全国
                    input: "emc-addr"//使用联想输入的input的id
                };
                let autocomplete = new AMap.Autocomplete(autoOptions)
                AMap.event.addListener(autocomplete, "select", function(e){
                    _this.localtionText = e.poi.name
                });
            });  
        },
        callPhone () {
            window.location.href = "tel:0510-120"
        },
        submit () {
            let json ={
                address: this.currentPositionsss,
                location: this.currentAddress,
                age: '',
                gender: '',
                mobile: ''
            }
            if (this.type == '1') {
                let patientId = this.LocalStorageUtil.getItem('patientId')
                json.patientId = patientId
                json.operation = 0
            }
            if (this.type == '3') {
                let patientId = this.LocalStorageUtil.getItem('patientId')
                json.patientId = patientId
                json.operation = 1
            }
            if (this.type == '2') {
                json.mobile = '15050483741'
                json.patientName = '他人'
                json.operation = 2
            }
            this.ACApi.patientsCalls(json,{
                onSuccess: res => {
                    if (res.success) {
                        Toast({
                            message: '呼救成功',
                            iconClass: 'mintui mintui-success',
                            duration: 3000
                        })
                    }
                },
                onFail: error => console.log(error)
            })
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '../../../assets/css/layout'
@import '../../../assets/css/var'
#container {
    width: 100%
    height: 6.5rem
    background: $White
    position: fixed
    top: 0
    z-index: 9
    border-bottom: 1px solid $dWhite
}
.funmine-text {
    font-size: $text-font24
    color: $elBlack    
}
.funmine-header {
    position: fixed
    top: 0
    z-index: 10
    $row()
    height: 1rem
    background: $White-7
    width: 100%
    border-bottom: 1px solid $dWhite
    .funmine-img {
        margin-top: .15rem
        width: .7rem
        height: .7rem
    }
    div {
        $row()
        $flex-1()
        position: relative
        padding: .2rem 0 .2rem .2rem
        .funmine-input {
            width: 100%
            border-radius: 5px
            background: $e6
            height: .6rem
            padding-left: .2rem
            color: $Blue
        }
        img {
            position: absolute
            right: 0
            width: .6rem
            height: .6rem
        }
    }
    
}
.funmine-body-list {
    $column()
    padding-top: 6.5rem
    padding-bottom: 1.5rem
    .funmine-top {
        height 1rem
        $row()
        $flex-ac()
        $flex-vc()
        line-height: .4rem
    }
    div {
        $column()
        border-top: 1px solid $dWhite
        height 1.3rem
        background: $White
        padding: 0 .4rem
        span {
            $row()
            $flex-1()
            $flex-ac()
            font-size: $text-font28
            color: $lBlack
        }
        span:last-child {
            font-size: $text-font24
            color: $elBlack    
        }
    }
}
.funmine-footer {
    position: fixed
    bottom: 0
    z-index: 1001
    $row()
    $flex-sb()
    $flex-ac()
    width: 100%
    min-height: 1.4rem
    background: $White
    box-shadow: 0 -3px 10px $Silver
    img {
        margin: .3rem
        width: .8rem
        height: .8rem
    }
    div {
        $column()
        $flex-1()
        padding-left: .4rem
        span {
            line-height: .5rem
            font-size: $text-font28
            color: $elBlack
        }
        span:last-child {
            color: $green
        }
    }
    
}
</style>
